<template>
	<view v-if="data.opttype!='delete'"> 
		<view  v-if="listindex == 0 && data[0].property.title!=undefined ">
			<view  style="display: flex;flex-direction: row;align-items: center;padding: 5px 10px;">
				<view style="height: 10px;width: 3px;background-color: #F55C23;display: flex;margin-left: -10px;margin-right: 7px;"></view> 
				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: calc(100vw - 30px);">
					<view>{{data[0].property.title}}</view>
				</view>
			</view>
			<view @click="openclassify" v-if="isaddedit" style="display: flex;flex-direction: row;text-align: center; align-items: center;justify-content: center;">
				<view style="text-align: center; width: 180px;padding:8px 10px;border: 1px solid #04C6C6;border-radius: 5px;color: #04C6C6;">
					<text class="iconfont icon-jiahao"></text><text style="font-size: 20px;font-weight: 650;">{{detailbtns[0].clicked.title}}</text>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;flex-wrap: wrap;width:100vw;background-color: #fff;font-size: 14px;" >
			<view @click="openhalfpage" @longpress="deleteitem" v-for="(item2, index2) in data" :key="item2.id" v-if="item2.blockName!='' && item2.opttype!='delete'">
				<view style="display: flex;flex-direction: row;flex-wrap: wrap;" v-if="item2.blockName=='detailproduct_image1'" >
					<view style="position: relative;width: 40px;height: 100%;">
						<image :src="pic_address + item2.data[0].style.colValue" style="width: 40px;height: 40px;padding:5px 3px;top: 0;left: 0;"></image> 
					</view>
				</view>
				<view :style="{'fontSize':clientType=='pda'?'20px':'14px'}" style="width:calc(100vw - 20px) ;padding:3px 5px; display: flex;flex-direction: row;flex-wrap: wrap;" v-if="item2.blockName=='detailproduct_line1_col3'">
					<view v-for="(gdetail,index3) in item2.data" :key='gdetail.name'>
						<view v-if="gdetail.style.colVisible && index3%3==0" style="width: calc(80vw - 30px);color: #666; display: flex;flex-direction: row;align-items: center;">
							<view >{{gdetail.style.coldisplay==null?'':gdetail.style.coldisplay}}</view>
						</view>
						<view v-else-if="gdetail.style.colVisible && index3%3!=0" style="color: #666; display: flex;flex-direction: row-;align-items: center;">
							<view >{{gdetail.style.coldisplay==null?'':gdetail.style.coldisplay}}</view>
						</view>
					</view>
				</view>
				<view :style="{'fontSize':clientType=='pda'?'20px':'14px'}" style="width:calc(100vw - 20px) ;padding:3px 5px; display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;" v-else-if="item2.blockName=='detailproduct_line1_col2'">
					<view v-for="(gdetail,index3) in item2.data" :key='gdetail.name'>
						<view v-if="gdetail.style.colVisible && index3%2==0" style="width: calc(50vw - 15px);color: #666; display: flex;flex-direction: row;align-items: center;">
							<view >{{gdetail.style.colText}}:{{gdetail.style.coldisplay==null?'':gdetail.style.coldisplay}}</view>
						</view>
						<view v-else-if="gdetail.style.colVisible && index3%2!=0" style="width: calc(50vw - 15px);color: #666; display: flex;flex-direction: row-;align-items: center;">
							<view >{{gdetail.style.colText}}:{{gdetail.style.coldisplay==null?'':gdetail.style.coldisplay}}</view>
						</view>
					</view>
				</view>
				<view :style="{'fontSize':clientType=='pda'?'20px':'14px'}" style="width:calc(100vw - 20px) ;padding:3px 5px; display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-between;" v-else-if="item2.blockName=='detailproduct_line1_col1'">
					<view v-for="(gdetail,index3) in item2.data" :key='gdetail.name'>
						<view v-if="gdetail.style.colVisible" style="width: 100%;color: #666; display: flex;flex-direction: row;align-items: center;">
							<view >{{gdetail.style.colText}}:{{gdetail.style.coldisplay==null?'':gdetail.style.coldisplay}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> 
		<view class="split"></view>
	</view>
</template>
 
<script>
	
	export default {
		props:{
			data:{
				type:Array
			},
			jsonoptions:{
				type:Object
			},
			listblockindex:{
				type:Number,
				default(){
					return 0
				}
			},
			listindex:{
				type:Number
			},
			skuselected:{
				type:Array
			},
			headdatalist:{
				type:Array
			},
			divArea:{
				type:String
			},
			detailbtns:{
				type:Array
			},
			pic_address:{
				type:String
			},
			isaddedit:{
				type:Boolean
			},
			clientType:{
				type:String,
				default(){
					return ""
				}
			}
		},
		
		mounted:function(res){
		},
		
		methods:{
			
			openclassify(){
				var btn = this.detailbtns[0]
				var click = btn.clicked
				var pagename = click.pageName
				var templetname = click.templetName
				var btnToDo = btn.btnToDo
				console.log(btnToDo)
				if(btnToDo == 'openpage'){
					var menuid = this.jsonoptions.menuid
					var modid = this.jsonoptions.modid
				}else{
					var menuid = btn.powerModId
					var modid = btn.powerModId
				}
				
				var title = click.title
				var expArgs = click.expArgs
				var conditions = {} 
				if(JSON.stringify(expArgs) != '[]' && expArgs != undefined){
					var headdatalist = this.headdatalist
					for(var i=0; i<expArgs.length; i++){
						var divArea = expArgs[i].divArea
						var colName = expArgs[i].colName
						if(divArea == 'dw_mx_head'){
							for(var j=0; j<headdatalist.length; j++){
								var content = headdatalist[j].data
								for(var k=0; k<content.length; k++){
									if(content[k].name == colName){
										conditions[colName] = content[k].style.colValue
									}
								}
							}
						}
					}
				}
				console.log(conditions)
				uni.navigateTo({url:`/pages/classify/classify?`
									+`templatename=${templetname}`
									+`&pagename=${pagename}`
									+`&menuid=${menuid}`
									+`&modid=${modid}`
									+`&divArea=`
									+`&title=${title}`
									+`&conditions=${JSON.stringify(conditions)}`
									+`&skuselected=${JSON.stringify(this.skuselected)}`})
			},
			
			deleteitem(){
				
			},
			
			updatedddwlistvalue(content,index,itemchanged){
				var that = this
				that.$refs.stylelist[index].updatedddwlistvalue(content,itemchanged)
			},
		
			openhalfpage(){
				uni.$emit("openhalfpage", this.data,this.listindex)
			},
		}
	}
</script>

<style scoped>
	
	.bottom-icons{display: flex;flex-direction: row;padding-left: 20px;}
	.bottom-icons .iconfont.icon-jia,.iconfont.icon-jianqu{margin: 5px 0;font-size: 18px;padding: 1px; border-radius: 50%;border:1px solid #666;color: #666;}
	.bottom-icons .iconfont.icon-jianqu{margin-left: 30px;}
	.bottom-icons .iconfont.icon-jianqu.showlast{visibility: hidden;}
	.split{margin-bottom: -1px; width: 100%;border-bottom: #f0f0f0 1px solid;}
</style>
